<template>
	<div id="category">
		<!-- 顶部 -->
		<nav-bar class="nav-bar"><div slot="center">商品分类</div></nav-bar>
		<div class="content">
			<!-- 菜单栏 -->
			<tab-menu :categories="categories" @selectItem="selectItem" class="tab-menu"/>
			
			<scroll id="tab-content" ><!-- :data="[categoryData]" -->
				<div id="tab-content">
					<!-- 商品子分类 -->
					<tab-content-category :subcategories="showSubcategory" class="tab-content-category"/>
					<!-- tabControl导航 -->
					<tab-control :titles="['综合', '新品', '销量']"
												@tabClick="tabclick"/>
					<!-- 分类商品 -->
				<!-- <TabContentDetail :category-detail="showCategoryDetail"/> -->
				</div>
			</scroll>
		</div>
	</div>
</template>

<script>
	import NavBar from 'components/common/navbar/NavBar.vue'
	import Scroll from'components/common/scroll/Scroll.vue'
	import TabControl from 'components/content/tabControl/TabControl.vue'
	
	import TabContentCategory from './childComps/TabContentCategory.vue'
	import TabContentDetail from'./childComps/TabContentDetail.vue'
	import TabMenu from './childComps/TabMenu.vue'
	
	import { 
				getCategory, 
				getSubcategory,
				getCategoryDetail 
	} from 'network/category.js'
export default {
	name:'Category',
	components:{
		NavBar,
		TabMenu,
		Scroll,
		TabControl,
		TabContentCategory,
		TabContentDetail
	},
	data(){
		return {
			categories:[],
			categoryData:[],
			currentIndex: -1,
			currentType: 'pop'
		}
	},
	created() {
		// 1.请求分类数据
		this._getCategory();
	},
	computed:{
		showSubcategory(){
			if(this.currentIndex === -1) return {};
			return this.categoryData[this.currentIndex].subcategories;
		},
		showCategoryDetail(){
			if(this.currentIndex === -1) return {};
			return this.categoryData[this.currentIndex].categoryDetail[this.currentType]
		}
	},
	methods:{
		/*******************监听事件***********************/
		selectItem(index){
			 this._getSubcategories(index);
		},
		tabclick(index) {
			console.log(index)
		  // switch (index) {
		  //   case 0:
		  //     this.currentType = 'pop'
		  //     break
		  //   case 1:
		  //     this.currentType = 'new'
		  //     break
		  //   case 2:
		  //     this.currentType = 'sell'
		  //     break
		  // }
		  //console.log(this.currentType);
		},
		
		/*******************网络请求数据******************************/
		_getCategory(){
			getCategory().then((res) => {
				//1.获取分类数据
			  this.categories = res.data.data.category.list
				//console.log(res)
			//2.初始化每个类别的子数据
			for(let i = 0; i < this.categories.length; i++){
				this.categoryData[i] ={
					subcategories:{},
					categoryDetail:{
						'pop':[],
						'new':[],
						'sell':[]
					}
				}
			}
			//3.请求第一个分类的数据
			this._getSubcategories(0);
			})
		},
		_getSubcategories(index) {
			this.currentIndex = index;
			const mailKey = this.categories[index].maitKey;
			getSubcategory(mailKey).then((res) =>{
				this.categoryData[index].subcategories = res.data.data;
				this.categoryData = { ...this.categoryData };   
				this._getCategoryDetail('pop');
				this._getCategoryDetail('new');
				this._getCategoryDetail('sell');
				//console.log(this.categoryData)
			})
		},
	_getCategoryDetail(type) {
	  // 1.获取请求的miniWallkey
	  const miniWallkey = this.categories[this.currentIndex].miniWallkey;
	  // 2.发送请求,传入miniWallkey和type
	  getCategoryDetail(miniWallkey, type).then((res) => {
	    // 3.将获取的数据保存下来
	    this.categoryData[this.currentIndex].categoryDetail[type] = res;
	    this.categoryData = { ...this.categoryData };
	  });
	}

	}
}
</script>
<style scoped>
	#category{
		height: 100vh;
	}
 .nav-bar{
	 background-color: #ff5577;
	 font-size: 16px;
	 color: #fff;
	 font-weight: 700;
 }
 .content{
	 overflow: hidden;
	 position: absolute;
	 left: 0;
	 right: 0;
	 top: 44px;
	 bottom: 49px;
	 display: flex;
 }

 #tab-content {
   height: 100%;
   flex: 1;
 }
</style>